import React, { useRef, useState } from 'react';
import { Animated, TouchableOpacity, View, StyleSheet } from 'react-native';
import { AntDesign } from '@expo/vector-icons';
import { Inter } from './basic';

const BUTTON_SIZE = 56;
const RADIUS = 150; // 弧线半径
const BUTTONS = [
  { icon: 'plus' as const, color: '#FF5252', text: '加油' },
  { icon: 'edit' as const, color: '#FFA726', text: '维修' },
  { icon: 'camera' as const, color: '#29B6F6', text: '保养' },
  { icon: 'camera' as const, color: '#29B6F6', text: '洗车' },
];

export const ArcFab = () => {
  const [open, setOpen] = useState(false);
  const animation = useRef(new Animated.Value(0)).current;

  const toggleMenu = () => {
    setOpen(!open);
    Animated.spring(animation, {
      toValue: open ? 0 : 1,
      useNativeDriver: true,
    }).start();
  };

  // 弧度分配
  const arc = Math.PI / 2; // 90度
  const startAngle = Math.PI; // 从180度开始
  const angleStep = arc / (BUTTONS.length - 1);

  return (
    <View style={styles.container}>
      {BUTTONS.map((btn, idx) => {
        const angle = startAngle + idx * angleStep;
        const x = Math.cos(angle) * RADIUS;
        const y = Math.sin(angle) * RADIUS;
        return (
          <Animated.View
            key={btn.icon}
            style={[
              styles.childBtn,
              {
                backgroundColor: btn.color,
                opacity: animation,
                transform: [
                  {
                    translateX: animation.interpolate({
                      inputRange: [0, 1],
                      outputRange: [0, x],
                    }),
                  },
                  {
                    translateY: animation.interpolate({
                      inputRange: [0, 1],
                      outputRange: [0, y],
                    }),
                  },
                  { scale: animation },
                ],
              },
            ]}
          >
            <AntDesign name={btn.icon} size={24} color="#fff" />

            <Inter fs={12} fw="400" c="#fff">
              {btn.text}
            </Inter>
          </Animated.View>
        );
      })}
      <TouchableOpacity onPress={toggleMenu} activeOpacity={0.8}>
        <View style={styles.fab}>
          <AntDesign name="plus" size={32} color="#fff" />
        </View>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    right: 30,
    bottom: 50,
    alignItems: 'center',
    justifyContent: 'center',
  },
  fab: {
    width: BUTTON_SIZE,
    height: BUTTON_SIZE,
    borderRadius: BUTTON_SIZE / 2,
    backgroundColor: '#1976D2',
    alignItems: 'center',
    justifyContent: 'center',
    elevation: 6,
  },
  childBtn: {
    position: 'absolute',
    width: 48,
    height: 48,
    borderRadius: 24,
    alignItems: 'center',
    justifyContent: 'center',
    elevation: 4,
    left: 4, // 为对齐主按钮适当调整
    top: 4,
  },
});
